<!--
 *
 *    ┏┓　　　┏┓
 *  ┏┛┻━━━┛┻┓
 *  ┃　　　　　　　┃
 *  ┃　　　━　　　┃
 *  ┃　＞　　　＜　┃
 *  ┃　　　　　　　┃
 *  ┃...　⌒　...　┃
 *  ┃　　　　　　　┃
 *  ┗━┓　　　┏━┛
 *      ┃　　　┃
 *      ┃　　　┃
 *      ┃　　　┃
 *      ┃　　　┃  神兽保佑
 *      ┃　　　┃  代码无bug
 *      ┃　　　┃
 *      ┃　　　┗━━━┓
 *      ┃　　　　　　　┣┓
 *      ┃　　　　　　　┏┛
 *      ┗┓┓┏━┳┓┏┛
 *        ┃┫┫　┃┫┫
 *        ┗┻┛　┗┻┛
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-23 15:35:59
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-23 16:34:19
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <el-tag class="password-tip">
      <div class="inner">
        <i class="el-icon-warning"></i>
        <div>修改信息之后，点击右下角更新按钮保存修改</div>
      </div>
    </el-tag>
    <el-form ref="form" :model="model" :rules="rules" label-position="top">
      <el-card shadow="never" header="基本信息" class="card">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="model.name" placeholder="企业名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地区" prop="regionCode">
              <el-select
                v-model="model.regionCode"
                style="width: 100%"
                placeholder="地区"
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行业" prop="industryCode">
              <el-select
                v-model="model.industryCode"
                style="width: 100%"
                placeholder="行业"
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办公电话" prop="extraInfo.workPhone">
              <el-input
                v-model="model.extraInfo.workPhone"
                placeholder="办公电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册地址" prop="extraInfo.businessAddress">
              <el-input
                v-model="model.extraInfo.businessAddress"
                type="textarea"
                placeholder="注册地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="介紹" prop="extraInfo.introduce">
              <el-input
                v-model="model.extraInfo.introduce"
                type="textarea"
                placeholder="介紹"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="营业执照" prop="extraInfo.businessLicense">
              <upload-file
                accept=".jpg, .jpeg, .png"
                :limit="1"
                :file-size="1"
                :file-list="uploadValue.businessLicense"
                @change="handleGetPic($events, 'businessLicense')"
              ></upload-file>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Logo" prop="extraInfo.logo">
              <upload-file
                accept=".jpg, .jpeg, .png"
                :limit="1"
                :file-size="1"
                :file-list="uploadValue.logo"
                @change="handleGetPic($events, 'logo')"
              ></upload-file>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" header="联系人信息" class="card">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="联系人名称" prop="extraInfo.operatorName">
              <el-input
                v-model="model.extraInfo.operatorName"
                placeholder="联系人名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号码" prop="extraInfo.operatorPhone">
              <el-input
                v-model="model.extraInfo.operatorPhone"
                placeholder="手机号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱" prop="extraInfo.operatorEmail">
              <el-input
                v-model="model.extraInfo.operatorEmail"
                placeholder="邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系人身份证号码"
              prop="extraInfo.operatorIdCard"
            >
              <el-input
                v-model="model.extraInfo.operatorIdCard"
                placeholder="联系人身份证号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系人身份证正面照"
              prop="extraInfo.operatorIdFront"
            >
              <upload-file
                accept=".jpg, .jpeg, .png"
                :limit="1"
                :file-size="1"
                :file-list="uploadValue.operatorIdFront"
                @change="handleGetPic($events, 'operatorIdFront')"
              ></upload-file>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系人身份证反面照"
              prop="extraInfo.operatorIdBack"
            >
              <upload-file
                accept=".jpg, .jpeg, .png"
                :limit="1"
                :file-size="1"
                :file-list="uploadValue.operatorIdBack"
                @change="handleGetPic($events, 'operatorIdBack')"
              ></upload-file>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" header="法人信息" class="card">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="法人名称" prop="extraInfo.legalName">
              <el-input
                v-model="model.extraInfo.legalName"
                placeholder="法人名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="法人身份证号码" prop="extraInfo.legalIdCard">
              <el-input
                v-model="model.extraInfo.legalIdCard"
                placeholder="法人身份证号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="法人身份证正面照"
              prop="extraInfo.legalIdFront"
            >
              <upload-file
                accept=".jpg, .jpeg, .png"
                :limit="1"
                :file-size="1"
                :file-list="uploadValue.legalIdFront"
                @change="handleGetPic($events, 'legalIdFront')"
              ></upload-file>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="法人身份证反面照" prop="extraInfo.legalIdBack">
              <upload-file
                accept=".jpg, .jpeg, .png"
                :limit="1"
                :file-size="1"
                :file-list="uploadValue.legalIdBack"
                @change="handleGetPic($events, 'legalIdBack')"
              ></upload-file>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div class="submit">
      <el-button type="primary" @click="handleSubmit">更新信息</el-button>
      <el-button type="danger">认证签约</el-button>
    </div>
  </div>
</template>
<script>
import UploadFile from '@/components/UploadFile'
export default {
  components: {
    'upload-file': UploadFile,
  },
  data() {
    return {
      uploadValue: { businessLicense: [], logo: [] },
      model: {
        industryCode: '',
        name: '',
        regionCode: '',
        extraInfo: {
          businessAddress: '',
          businessLicense: '',
          introduce: '',
          legalIdBack: '',
          legalIdCard: '',
          legalIdFront: '',
          legalName: '',
          logo: '',
          operatorEmail: '',
          operatorIdBack: '',
          operatorIdCard: '',
          operatorIdFront: '',
          operatorName: '',
          operatorPhone: '',
          workPhone: '',
        },
      },
      rules: {
        industryCode: [
          {
            required: true,
            message: '请选择行业',
            trigger: 'change',
          },
        ],
        name: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur',
          },
        ],
        regionCode: [
          {
            required: true,
            message: '请选择地区',
            trigger: 'change',
          },
        ],
        extraInfo: {
          businessAddress: [
            {
              required: true,
              message: '请输入注册地址',
              trigger: 'blur',
            },
          ],
          businessLicense: [
            {
              required: true,
              message: '请上传营业执照',
              trigger: 'change',
            },
          ],
          introduce: [
            {
              required: true,
              message: '请输入介绍',
              trigger: 'blur',
            },
          ],
          legalIdBack: [
            {
              required: true,
              message: '请上传法人身份证反面照',
              trigger: 'change',
            },
          ],
          legalIdCard: [
            {
              required: true,
              message: '请输入法人身份证号码',
              trigger: 'blur',
            },
          ],
          legalIdFront: [
            {
              required: true,
              message: '请上传法人身份证正面照',
              trigger: 'change',
            },
          ],
          legalName: [
            {
              required: true,
              message: '请输入法人名称',
              trigger: 'blur',
            },
          ],
          logo: [
            {
              required: true,
              message: '请上传Logo',
              trigger: 'change',
            },
          ],
          operatorEmail: [
            {
              required: true,
              message: '请输入邮箱',
              trigger: 'blur',
            },
          ],
          operatorIdBack: [
            {
              required: true,
              message: '请上传联系人身份证反面照',
              trigger: 'change',
            },
          ],
          operatorIdCard: [
            {
              required: true,
              message: '请输入联系人身份证号码',
              trigger: 'blur',
            },
          ],
          operatorIdFront: [
            {
              required: true,
              message: '请上传联系人身份证正面照',
              trigger: 'change',
            },
          ],
          operatorName: [
            {
              required: true,
              message: '请输入联系人姓名',
              trigger: 'blur',
            },
          ],
          operatorPhone: [
            {
              required: true,
              message: '请输入手机号码',
              trigger: 'blur',
            },
          ],
          workPhone: [
            {
              required: true,
              message: '请输入办公电话',
              trigger: 'blur',
            },
          ],
        },
      },
    }
  },
  methods: {
    handleGetPic(arr, key) {
      this.model.extraInfo[key] = arr[0] ? arr[0].url : ''
    },
    handleSubmit() {
      this.$refs.form.validate()
    },
  },
}
</script>
<style lang="scss" scoped>
.password-tip {
  display: block;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 8px;
  .inner {
    display: flex;
    align-items: center;

    .el-icon-warning {
      margin-right: 10px;
    }
    > div {
      flex: 1;
      white-space: normal;
      line-height: 1.8;
    }
  }
}
.card {
  margin-top: 20px;
}
.submit {
  margin-top: 20px;
  text-align: right;
}
</style>
